<template>
  <div class="Frist">
    <div class="popup-outer" id="popup">
      <h2>选择地点</h2>
      <div class="rf-storelocator">
        <span class="labeltext">供货情况：</span>
        <span class="producttext">AirPods (第二代)</span>
      </div>
      <div class="province-selector" id="province">
        <span>显示此附近的零售店：</span>
        <button class="icon-chevrondown" @click="DisclosureText">{{Newarea}}</button>
        <span  class-niuma-didi class="localnav-chevron" ref="GatClass" id="localnav-chevron"></span>
        <div
          data-core-height-transition-wrapper
          class="wrapper"
          id="localnav-tray"
        >
          <ContextOne />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from '../../../../../../bus'
import ContextOne from "./ContextFrist/ContextOne.vue";
export default {
  components: { ContextOne },
  data() {
    return {
      ShowContent:false,
      Newarea:'北京',
      Keepheight:false,
      HiddenTownHeight:[],
      ShowallArea:false,
      thisShow:'',
      totleHight:''
    };
  },
  created() {
    const that =this
   // 接收HiddenTown传递进来的数据
    bus.$on('ThereButton',function(data){
      
    })
    // 接收ContextOne传递进来的数据，第一块区域传递进来的数据
    bus.$on('previousHight',function(data){
      var HightChange = document.getElementById("localnav-tray");
       HightChange.style.height = data + "px";
      that.HiddenTownHeight.splice(0,1,data) 
    })
    // 第二区域传递进来的数据
    bus.$on('previousHightTwo',function(data){
      var HightChange = document.getElementById("localnav-tray");
      // 转换字符串
      if (data!=undefined) {
        that.totleHight = parseInt(data) +75
        that.HiddenTownHeight.splice(0,1,data)
      }
       HightChange.style.height = that.totleHight + "px";
    })
    // 接收ContextOne传递的参数
    bus.$on('HiddenBox',function(data,sceond,third){
      var HightChange = document.getElementById("localnav-tray");
      that.Newarea=data

      // 接收第二块区域传递进来的数据
      that.HiddenTownHeight.splice(0,1,sceond)
      
      that.ShowallArea=true
      // 触发函数，收起盒子
      that.thisShow=third
        if (that.thisShow==true) {
          setTimeout(() => {
         HightChange.style.height=parseInt(that.HiddenTownHeight[0])+75+'px'
         that.ChangeStyle()
         that.thisShow=false
         }, 250);
      }
  that.thisShow=false
      setTimeout(() => {
       that.DisclosureText() 
      }, 200);
      that.Keepheight=true
      
    })
    bus.$on('FristValueThis',function (data) {
      if (data=='thisNow') {
        setTimeout(() => {
        that.DisclosureText()
      }, 110);
      }
    })
  },
 
  methods: {
    DisclosureText(value) {
      let DisclosureText = document.getElementById('localnav-chevron');
      var Hidelocalnav = document.getElementById("localnav-tray");   
      // 传递高度给HidenSecond
      if (this.HiddenTownHeight[0]==null) {
        bus.$emit('FristHightChange',582)
      }else{
        bus.$emit('FristHightChange',this.HiddenTownHeight[0])
      }
      //  点击之后判断图标这个属性是否存在,进行样式的替换
      if (DisclosureText.classList.contains("localnav-chevron")) {
        DisclosureText.classList.remove("localnav-chevron");
        DisclosureText.classList.add("localnav-Second");
        // 传递给ContextOne
        setTimeout(() => {
          bus.$emit('ShowContent',true)
        }, 260);
        // 清除mounted添加的样式
        Hidelocalnav.style.cssText = "";
        // 添加高度
         this.ChangeHight("AddHight");
         bus.$emit('HiddenIf',true)
        
      } else if (DisclosureText.classList.contains("localnav-Second")) {
        DisclosureText.classList.remove("localnav-Second");
        DisclosureText.classList.add("localnav-chevron");
        // 定时传输数据
        setTimeout(() => {
          bus.$emit('ShowContent',false)
        }, 250);
        // 删除高度
        this.ChangeHight("CleanHight");
        bus.$emit('HiddenIf',false)
      }
    },
    // 动态的变换大盒子的高度
    ChangeStyle(){
      let DisclosureText = document.getElementById('localnav-chevron');
      var Hidelocalnav = document.getElementById("localnav-tray");
      //  点击之后判断图标这个属性是否存在,进行样式的替换
      if (DisclosureText.classList.contains("localnav-chevron")) {
        DisclosureText.classList.remove("localnav-chevron");
        DisclosureText.classList.add("localnav-Second");
        }
    },
    ChangeHight(value) {
      var HightChange = document.getElementById("localnav-tray");
      
      HightChange.style.height = 0 + "px";
      if (value == "AddHight") {
        if (this.HiddenTownHeight[0]==undefined) {
          HightChange.style.height = 582 + "px";

        }else{
          var totleHightTwo =parseInt(this.HiddenTownHeight[0])+75
          HightChange.style.height = totleHightTwo + "px";
        }
        
      }
      if (value == "CleanHight") {
        HightChange.style.cssText = "";
         HightChange.style.height = 0 + "px"; 
      }
    },
    HiddenHight() {
      // 一开始添加样式和高度
      var HightChange = document.getElementById("localnav-tray");
      HightChange.style.height = 0 + "px";
    },
  },
  mounted() {
    this.HiddenHight();
  },
};
</script>

<style lang="less" scoped>
.Frist {
  width: 100%;
  height: 100%;
  .popup-outer {
    width: 100%;
    padding: 74px 80px 17px 80px;
    border-bottom: 1px solid #d2d2d7;
    h2 {
      height: 45px;
      font-size: 35px;
      line-height: 1.1;
      font-weight: 600;
      letter-spacing: 0;
      color: black;
    }
    .rf-storelocator {
      padding-bottom: 15px;
      width: 656px;
      height: 40px;
    }
    .province-selector {
      width: 656px;
         position: relative;
      span {
        color: #3b3b3c;
      }
      [class-niuma-didi]{
        padding-left: 0.3em;
      }
      .icon-chevrondown {
     
        font-size: 16px;
        border: none;
        background-color: #fff;
        color: #4a92db;
        cursor: pointer;
      }
      .localnav-chevron::before {
        position: absolute;
        left: 436px;
        content: "";
        display: block;
        position: absolute;
        top: 15.5px;
        height: 1px;
        z-index: 1;
        background: #4a92db;
        width: 5px;
        transform-origin: 100% 100%;
        transform: rotate(40deg) scaleY(1.1);
        right: 50%;
      }
      .localnav-chevron::after {
        color: #4a92db;
        position: absolute;
        left: 440px;
        content: "";
        display: block;
        position: absolute;
        top: 12px;
        height: 1px;
        z-index: 1;
        background: #4a92db;
        width: 5px;
        transform-origin: 100% 100%;
        transform: rotate(-40deg) scaleY(1.1);
        right: 50%;
      }
      .localnav-Second::before {
        position: absolute;
        left: 430px;
        content: "";
        display: block;
        position: absolute;
        top: 12px;
        height: 1px;
        z-index: 1;
        background: #4a92db;
        width: 5px;
        transform-origin: 100% 100%;
        transform: rotate(140deg) scaleY(1.1);
        right: 50%;
      }
      .localnav-Second::after {
        position: absolute;
        left: 437px;
        content: "";
        display: block;
        position: absolute;
        top: 14px;
        height: 1px;
        z-index: 1;
        background: #4a92db;
        width: 5px;
        transform-origin: 100% 100%;
        transform: rotate(50deg) scaleY(1.1);
        right: 50%;
      }
      .wrapper {
        // display: none;
      }
      [data-core-height-transition-wrapper] {
        transition-property: height;
        transition-timing-function: ease-in-out;
        transition-duration: .4s;
        overflow: hidden;
      }
    }
  }
}
</style>